<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" :title="$t('pageTranslation.otherApplication')"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<scroll-view :show-scrollbar="false" :scroll-y="false" class="scroll" @scrolltolower="scrolltolowerFn">
				<view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x distributed-head">
					<view class="custom-card-title title">
						<view class="title-line"></view>
						{{$t('pageTranslation.otherSetting')}}
					</view>
					<view class="icons family">
						<view class="gui-grid-item  icons_item" v-for="(x,i) in data.rollsHomework" :key="i" @click="goPage(x.path)">
							
							<image  :style="{opacity:(pagePermission(x.path)?'1':'0.3')}" class="gui-grid-icon-img  icons_item_img" :src="x.imgPath"></image>
							<text :style="{color:(pagePermission(x.path)?'':'gray')}" class="gui-grid-text gui-primary-text icons_title">{{x.text}}</text>
						    
						</view>
					</view>
				</view>
			</scroll-view>
		</template>
	</gui-page>
</template>

<script setup>
import {ref,reactive} from 'vue'
import {navigate} from '@/utils/routerSkip.js'
import scanCode from "@/components/scan-code/scan-code.vue";
import { hasPagePermission } from "@/common/pagePermission.js"
// 图片地址
import { IMG_BASE_URL } from "@/constant/config.js"
//JS国际化引入
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const baseUrl = IMG_BASE_URL;

components:{scanCode}

let data=reactive({
	 rollsHomework:[{
		path: '/pages/setting/changePassword',
		text: t('navigationBar.changePassword'),
		imgPath: baseUrl+'/afl-app/img/202211221931030987_admin.png'
	},{
		path: '/pages/setting/warehouse',
		text: t('navigationBar.warehouseSetting'),
		imgPath: baseUrl+'/afl-app/img/202211221931220855_admin.png'
	},{
		path: '/pages/setting/printer',
		text: t('navigationBar.printerSetting'),
		imgPath: baseUrl+'/afl-app/img/202211221931410301_admin.png'
	}],
})


// 跳转页面
function goPage(path) {
	console.log(path)
		var hasPermission=hasPagePermission(path);
		if(hasPermission)
		{
			navigate({
				url: path
			})
		}
		else{
			uni.showToast({
				title:'No Permission',
				icon:'none'
			})
			return
		}
};
const scrolltolowerFn = ()=>{

}

</script>

<style lang="scss" scoped>
.family{
	font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
}
.title{
	font-size: 36rpx;
	font-weight: 500;
	margin-bottom: 30rpx;
}
.icons{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 20rpx;

	&_item{
		width: 33%;

		&_img{
			display: block;
			width: 120rpx;
			height: 120rpx;
			margin: 0 auto;
			border-radius: 20rpx;
		}
	}
}
.icons_title{
	font-size: 32rpx;
	margin-bottom: 40rpx;
}
</style>
